<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>个人月收支</title>
  <script src="/echarts-table/echarts.min.js"></script>
  <link href="/semantic-ui/semantic.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--后端传过来的选项展示，并将选择结果传回去-->
<div class="ui equal width form" style=" width:800px; left:30%;margin-top: 0; !important;">
  <form class="ui form" th:action="@{/monthMoney}" method="POST" th:object="${monthIE}">
    <div class="fields">
      <div class="field">
        <label>Year</label>
        <select th:field="*{year}">

          <option th:each="year : ${yearlist}"
                  th:value="${year}"
                  th:text="${year}">
          </option>
        </select>
      </div>
      <div class="field">
        <label>Month</label>
        <select th:field="*{month}">
          <option th:each="month : ${monthlist}"
                  th:value="${month}"
                  th:text="${month}">
          </option>
        </select>
      </div>
      <div class="field">
        <label>IorE</label>
        <select th:field="*{iorE}">
          <option th:value="收入" th:text="收入"></option>
          <option th:value="支出" th:text="支出"></option>
        </select>
      </div>
      <div class="field">
        <label>userID</label>
        <select th:field="*{userid}">
          <option th:each="user : ${userlist}"
                  th:value="${user}"
                  th:text="${user}">
          </option>
          <option value="0" th:text="全部用户"></option>
        </select>
      </div>
    </div>
    <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
      <button class="ui  submit blue button" style="width:400px;" type="submit">查看详情</button>
    </div>
  </form>
  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
    <!-- 重置按钮 -->
    <button class="ui red basic button" onclick="location.reload();" style="flex: 1;">重置</button>

    <!-- 返回链接，样式类似按钮 -->
    <a th:href="@{/ledger}" class="ui green basic button" style="flex: 1; margin-left: 10px;">返回</a>
  </div>
</div>
<!--echarts容器-->
<div id="container" style="width: 1000px;height:600px;left: 25%;margin-top: 20px"></div>
<script type="text/javascript" th:inline="javascript">
  let datas = [[${IEdata}]];
  console.log(datas);
  <!--代表着特定月份_身份_收支类型-->
  <!--只需要一个参数：消费名称+金额-->
  var dom = document.getElementById('container');
  var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  var app = {};

  var option;

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '未查询到数据',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: JSON.parse(datas)
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }
  window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>